<template>
	<div>
		<div class="head">
			<a v-if="nameRoute =='1'" @click="$router.push({path: '/'})" class="return"></a>
			<a v-else @click="$router.go(-1)" class="return"></a>
      {{$t('OutChange.v1')}}
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling" style="padding:10px;">
				<div style="padding: 0px 0px;">
<!--					<van-dropdown-menu>-->
<!--						<van-dropdown-item v-model="value" :options="option" @change="getMenu"/>-->
<!--					</van-dropdown-menu>-->
          <van-field value="EXUU" disabled style="padding-left: 10px;"/>
				</div>
				<div style="padding-top: 10px;">
					<van-card :title="$t('OutChange.v2')">
						<div slot="price" style="padding-bottom: 5px;color: white;">
							<ul class="type">
								<li class="on">ERC20</li>
							</ul>
							<div style="padding-top: 10px;">{{$t('OutChange.v3')}}</div>
							<van-field :placeholder="$t('OutChange.v4')" v-model.trim="address" maxlength="50">
								<div slot="button" style="color: rgb(133, 141, 172);" @click="toQr()" v-if="showQR == 0">
									<img src="../assets/images/l-qr3.png" style="width:20px;">
								</div>
							</van-field>
							<div style="padding-top: 10px;">{{$t('OutChange.v5')}}</div>
							<van-field :placeholder="$t('OutChange.v6')" v-model.trim="Num2" maxlength="20" @input="NumVal(index)">
								<div slot="button" style="color: rgb(133, 141, 172); font-size:12px;">
									<span style="padding:0 8px;" v-if="index == 1">EXUU</span>
									<span style="padding:0 8px;" v-if="index == 2">USDT</span>
									<span>|</span>
									<span style="color:#3ca670; padding:0 8px;" @click="add">{{$t('OutChange.v7')}}</span>
								</div>
							</van-field>
							<div style="color:#848cab;">{{$t('OutChange.v8')}} {{num}}
								<span v-if="index == 1">EXUU</span>
								<span v-if="index == 2">USDT</span>
							</div>
							<div style="padding-top: 10px;">{{$t('OutChange.v9')}}</div>
							<van-field readonly v-model.trim="cost">
								<div slot="button" style="color: rgb(133, 141, 172);" v-if="index == 1">EXUU</div>
								<div slot="button" style="color: rgb(133, 141, 172);" v-if="index == 2">USDT</div>
							</van-field>
							<div class="hint">
                {{$t('OutChange.v10')}}
							</div>
						</div>
					</van-card>
				</div>
				<div class="weui-flex dz">
					<div class="weui-flex__item">{{$t('OutChange.v11')}}</div>
					<div v-text="parseFloat(Account).toFixed(5).slice(0,-1)"></div>
				</div>
				<div style="padding:20px 15px;">
					<van-button slot="button" size="normal" type="info" :loading="loading" @click.native="submit">{{$t('OutChange.v1')}}</van-button>
				</div>
			</div>
		</div>
		<!-- 交易密码 -->
		<van-popup v-model="show2" position="bottom" class="buyo">
			<div style="padding: 15px 25px;color: #3fb776;">
				<span>{{$t('OutChange.v12')}}</span>
				<span style="font-size: 14px;color: rgb(133, 141, 172);float: right;padding-top: 3px;" @click="quit">{{$t('OutChange.v13')}}</span>
			</div>
			<div style="background: rgb(40,44,62);padding: 10px 20px;">
				<div style="font-size: 14px;color: rgb(133, 141, 172);padding-bottom: 10px;">{{$t('OutChange.v19')}}</div>
				<van-field :placeholder="$t('OutChange.v14')" maxlength="6" type="password" v-model.trim="payPwd" />
				<div style="padding: 10px 0px;color: rgb(63, 183, 118);font-size: 14px;" @click="$router.push({path: '/UpdateMb'})" class="tar">{{$t('OutChange.v15')}}？</div>
				<div>
					<van-button slot="button" size="normal" type="info" :loading="loading" :loading-text="$t('OutChange.v16')" @click.native="isOk">{{$t('OutChange.v16')}}</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import { Toast } from "vant";
	import { base, change } from "./../utils/api";
	export default {
		data() {
			return {
				showQR: 0,
				address: '', //地址
				num: 0, //可用
				Num2: "", //数量
				cost: 0.0000, //手续费
				Account: 0, //到账
				show2: false,
				payPwd: "",
				loading: false,
				index: 1,
				value: 0,
				option: [
			        { text: 'EXUU', value: 0 },
			        { text: 'USDT', value: 1 }
				],
				nameRoute:''
			};
		},
		mounted() {
			this.nameRoute = this.$route.query.name
			if(window.plus) {
				this.showQR = 0;
				if(sessionStorage.codeResult) {
					this.address = sessionStorage.codeResult;
					sessionStorage.removeItem('codeResult');
				}
			} else {
				this.showQR = 1;
			}
			this.getCon();
		},
		methods: {
			getMenu(index) {
				if(index == 0){
					this.index = 1;
				}else if(index == 1) {
					this.index = 2;
				}
				this.Num2 = '';
				this.address = '';
				this.payPwd = '';
				this.getCon(); // 重新查询转出的信息
				this.NumVal(this.index); // 重新查询手续费
			},
			getCon() {
				// 获取账户余额
				this.axios
					.get(process.env.API_HOST + "user/transfer/balance/" + this.index)
					.then(res => {
						if(res.data.code == 200) {
							this.num = res.data.data;
						}
					});
			},
			NumVal(coin) {
				// 获取手续费
				if(this.Num2 != "") {
					this.axios
						.get(process.env.API_HOST + "user/tansfer/fee/" + this.Num2 + '/' + coin)
						.then(res => {
							if(res.data.code == 200) {
								this.cost = parseFloat(res.data.data).toFixed(5).slice(0,-1);
								this.Account = this.Num2 - this.cost;
							}
						});
				} else {
					this.cost = 0.0000;
					this.Account = 0;
				}
			},
			add() {
				//全部
				this.Num2 = this.num;
				this.NumVal(this.index);
			},
			submit() {
				if(!this.address) {
					Toast(this.$t('OutChange.v17'));
					return false;
				}
				if(!this.Num2) {
					Toast(this.$t('OutChange.v18'));
					return false;
				}
				this.show2 = true;
			},
			quit() {
				this.show2 = false;
			},
			isOk() {
				this.loading = true;
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						change.getTransfer({
							'coinId': this.index,
							'num': this.Num2,
							'key': this.k,
							'sign': this.rsaEncrypt(this.payPwd + ',' + this.address + ',' + this.v)
						}).then(res => {
							if(res.code == 200) {
								this.show2 = false;
								setTimeout(() => {
									this.loading = false;
									this.Num2 = '';
									this.address = '';
									this.payPwd = '';
									this.getCon(); // 重新查询转出的信息
									this.NumVal(this.index); // 重新查询手续费
								}, 500);
							} else if(res.code == 500) {
								this.loading = false;
							}
							this.showText = res.msg;
							setTimeout(() => {
								this.showText = '';
							}, 2000);
							Toast(res.msg);
						})
					}
				})
			},
			toQr() {
				this.$router.push({
					path: '/Qr'
				})
			}
		},
		watch: {
			Num2: function() {
				this.Num2 = this.Num2.replace(/[^\d^\.]+/g, ""); // 不能输入中文和字母
			},
			payPwd: function() {
				this.payPwd = this.payPwd.replace(/[^\d]/g, ""); // 不能输入中文和字母
			}
		}
	};
</script>

<style lang="less" scoped>
	.overlay-content {
		.title {
			background: #212639;
			border-radius: 5px;
			padding: 6px 10px;
		}
		/deep/ .van-tabs__nav {
			background-color: transparent;
		}
		/deep/ .van-tabs__line {
			height: 2px;
			background-color: #00dd94;
		}
		/deep/ .van-card {
			background: #2c3145;
			color: white;
			border-radius: 5px;
			padding: 5px 10px;
		}
		/deep/ .van-card__price {
			display: initial;
		}
		/deep/ .van-cell {
			border-bottom: 1px solid #394057;
			background: #2c3145;
			padding: 5px 0px;
		}
		/deep/ .van-cell:not(:last-child)::after {
			border: 0;
		}
		/deep/ input {
			font-size: 12px;
		}
		/deep/ .van-hairline--top-bottom::after {
			border-color: rgb(133, 141, 172);
		}
		.type {
			padding: 10px 0;
			li {
				display: inline-block;
				padding: 6px 15px;
				border: 1px solid #394057;
				border-radius: 5px;
				margin-right: 10px;
				font-weight: bold;
				&.on {
					border: 1px solid #3eb271;
					color: #3eb271;
				}
			}
		}
		.hint {
			color: #9a9fb1;
			background: #212639;
			padding: 6px;
			font-size: 12px;
			margin: 6px 0;
		}
		.dz {
			font-size: 12px;
			padding: 0 12px;
			.weui-flex__item {
				color: #848cab;
			}
		}
	}

	/deep/ .buyo.van-popup {
		background: rgb(34, 38, 56);
		color: white;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}

	/deep/ .buyo .van-button--small {
		margin-top: 0px;
	}

	/deep/ .buyo .van-cell:not(:last-child)::after {
		border: 0;
	}

	/deep/ .buyo .van-button {
		height: 35px;
		line-height: 35px;
	}

	/deep/ .van-dropdown-menu {
		background-color: #2c3145;
	}

	/deep/ .overlay-content .van-cell {
		padding: 5px 20px;
		color: white;
	}

	/deep/ .van-dropdown-menu__item {
		position: absolute;
    	top: 15px;
	}
</style>
